"use client";

import { MacroAction } from "@/src/types/types.v1";
import { Box, Img } from "@chakra-ui/react";
import { useState } from "react";
import { ArrowDown } from "@/src/icons/ArrowDown";
import { ArrowDownFill } from "@/src/icons/ArrowDownFill";
import { ArrowUp } from "@/src/icons/ArrowUp";
import { ArrowUpFill } from "@/src/icons/ArrowUpFill";

function MacroMouseAction({
  action,
  onChange,
}: {
  action: MacroAction;
  onChange: (action: MacroAction) => void;
}) {
  const [edit, setEdit] = useState(false || action.webCode === "");

  const changeKey = (event: any) => {
    // event.preventDefault();
    if (!edit) return;
    onChange({ ...action, webCode: event.button });
    setEdit(false);
  };

  const changeActionUp = () => {
    onChange({
      ...action,
      action: action.action === "mousedown" ? "mouseup" : "mousedown",
    });
  };

  const changeActionDown = () => {
    onChange({
      ...action,
      action: action.action === "mouseup" ? "mousedown" : "mouseup",
    });
  };

  return (
    <div
      className="min-w-16 text-center relative macro-key-action"
      aria-selected={edit}
    >
      <Box
        className="triangle-top"
        data-action={action.action}
        onClick={() => changeActionUp()}
      >
        {/* <Img
          src={`./svgs/arrow_down${
            action.action == "mousedown" ? "_fill" : ""
          }.svg`}
          alt="up"
        /> */}
        {action.action == "mousedown" ? <ArrowDownFill /> : <ArrowDown />}
      </Box>
      <Box
        onClick={() => setEdit(true)}
        autoFocus
        onBlur={() => setEdit(false)}
        className="flex justify-center border-2 border-transparent rounded  aria-selected:border-blue-1 min-h-14"
        aria-selected={action.webCode === ""}
        onMouseDown={changeKey}
        onMouseUp={changeKey}
        onContextMenu={(evt) => {
          evt.preventDefault();
          evt.stopPropagation();
          return false;
        }}
      >
        {action.webCode == "0" && (
          <svg
            width="40"
            height="54"
            viewBox="0 0 40 54"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M19.9997 2.17871V22H38V20.7528C38 10.4663 29.9133 2.17871 20 2.17871C19.9999 2.17871 19.9998 2.17871 19.9997 2.17871ZM2 33.4254V24H38V33.4254C38 43.7118 29.9133 51.9995 20 51.9995C10.0867 51.9995 2 43.7118 2 33.4254ZM0 20.7528C0 9.41831 8.92645 0.178711 20 0.178711C31.0735 0.178711 40 9.41831 40 20.7528V33.4254C40 44.7599 31.0735 53.9995 20 53.9995C8.92645 53.9995 0 44.7599 0 33.4254V20.7528Z"
              fill="white"
              fillOpacity={edit ? 1 : 0.7}
            />
          </svg>
        )}
        {action.webCode == "1" && (
          <svg
            width="40"
            height="54"
            viewBox="0 0 40 54"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M20 2.17969C10.0867 2.17969 2 10.4673 2 20.7538V22L38 22V20.7538C38 10.4673 29.9133 2.17969 20 2.17969ZM2 33.4264L2 24L38 24V33.4264C38 43.7128 29.9133 52.0004 20 52.0004C10.0867 52.0004 2 43.7128 2 33.4264ZM0 20.7538C0 9.41929 8.92645 0.179688 20 0.179688C31.0735 0.179688 40 9.41929 40 20.7538V33.4264C40 44.7608 31.0735 54.0004 20 54.0004C8.92645 54.0004 0 44.7608 0 33.4264V20.7538ZM23 10C23 8.34315 21.6569 7 20 7C18.3431 7 17 8.34315 17 10V15.5C17 17.1569 18.3431 18.5 20 18.5C21.6569 18.5 23 17.1569 23 15.5V10Z"
              fill="#0066FF"
              fillOpacity={edit ? 1 : 0.2}
            />
          </svg>
        )}
        {action.webCode == "2" && (
          <svg
            width="40"
            height="54"
            viewBox="0 0 40 54"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M19.9999 2.17871C10.0867 2.17877 2 10.4664 2 20.7528V22H20.0026C20.0008 21.9745 19.9999 21.9488 19.9999 21.9229V2.18515C19.9999 2.183 19.9999 2.18086 19.9999 2.17871ZM2 33.4254V24H38V33.4254C38 43.7118 29.9133 51.9995 20 51.9995C10.0867 51.9995 2 43.7118 2 33.4254ZM0 20.7528C0 9.41831 8.92645 0.178711 20 0.178711C31.0735 0.178711 40 9.41831 40 20.7528V33.4254C40 44.7599 31.0735 53.9995 20 53.9995C8.92645 53.9995 0 44.7599 0 33.4254V20.7528Z"
              fill="#0066FF"
              fillOpacity={edit ? 1 : 0.2}
            />
          </svg>
        )}
        {action.webCode == "4" && (
          <svg
            width="44"
            height="54"
            viewBox="0 0 44 54"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M6 20.7528C6 10.8145 13.5486 2.74198 23 2.20695V22H6V20.7528ZM5.10306 14C7.81631 5.96656 15.2357 0.178711 24 0.178711C35.0735 0.178711 44 9.41831 44 20.7528V33.4254C44 44.7599 35.0735 53.9995 24 53.9995C12.9265 53.9995 4 44.7599 4 33.4254V24H1C0.447715 24 0 23.5523 0 23V15C0 14.4477 0.447715 14 1 14H5.10306ZM6 24V33.4254C6 43.7118 14.0867 51.9995 24 51.9995C33.9133 51.9995 42 43.7118 42 33.4254V24H6ZM25 22L25 2.20695C34.4514 2.74198 42 10.8145 42 20.7528V22H25Z"
              fill="#0066FF"
              fillOpacity={edit ? 1 : 0.2}
            />
          </svg>
        )}
        {action.webCode == "3" && (
          <svg
            width="44"
            height="54"
            viewBox="0 0 44 54"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M6 20.7528C6 10.8145 13.5486 2.74198 23 2.20695V22H6V20.7528ZM25 22L25 2.20695C34.4514 2.74198 42 10.8145 42 20.7528V22H25ZM6 24V27V33.4254C6 43.7118 14.0867 51.9995 24 51.9995C33.9133 51.9995 42 43.7118 42 33.4254V24H6ZM4.30117 37C5.94442 46.64 14.1171 53.9995 24 53.9995C35.0735 53.9995 44 44.7599 44 33.4254V20.7528C44 9.41831 35.0735 0.178711 24 0.178711C12.9265 0.178711 4 9.41831 4 20.7528V27H1C0.447715 27 0 27.4477 0 28V36C0 36.5523 0.447715 37 1 37H4.30117Z"
              fill="#0066FF"
              fillOpacity={edit ? 1 : 0.2}
            />
          </svg>
        )}
      </Box>
      <Box
        className="triangle-bottom"
        data-action={action.action}
        onClick={() => changeActionDown()}
      >
        {/* <Img
          src={`svgs/arrow_up${action.action == "mouseup" ? "_fill" : ""}.svg`}
          alt="up"
        /> */}
        {action.action == "mouseup" ? <ArrowUpFill /> : <ArrowUp />}
      </Box>
    </div>
  );
}

export default MacroMouseAction;
